<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备数据查看</title>
    <script src="../src/static/jquery.js"></script>
    <link rel="stylesheet" href="sheBeiShuJu.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>
    <script src="../src/static/echarts.js"></script>
</head>
<body>
<div>
    <div class="layui-inline down"> <!-- 注意：这一层元素并不是必须的 -->



    </div>
    <div class="layui-container ">
        <div class="layui-row">
            <div class="layui-col-md1">
                <div class="tt">请选择月份：</div>
            </div>
            <div class="layui-col-md3">
                <input type="text" value="" class="layui-input yuefen" id="test1" placeholder="请选择月份">
            </div>
            <div class="layui-col-md3">
                <form class="layui-form" action="" >
                    <div class="layui-form-item">
                        <label class="layui-form-label">机器型号：</label>
                        <div class="layui-input-block">
                            <select name="roleId" lay-verify="required" id="machineModelId">
                                <option value="">请选择设备号</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-col-md1 layui-col-md-offset1">
                <button class="layui-btn layui-btn-radius layui-btn-normal " id="dj">查看数据</button>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md3">
                <div class="fk_zong">
                    <div class="fk_one">本台设备总检测数</div>
                    <div class="fk_two"><label id="ce1"></label></div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="fk_zong">
                    <div class="fk_one">本台设备总付款数</div>
                    <div class="fk_two"><label id="ce2"></label></div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="fk_zong">
                    <div class="fk_one">本台设备今日检测数</div>
                    <div class="fk_two"><label id="ce3"></label></div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="fk_zong">
                    <div class="fk_one">本台设备今日付款数</div>
                    <div class="fk_two"><label id="ce4"></label></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" class="tongjitu"></div>

</div>

<script>
    var form;
    layui.use(['form'], function () {
        form = layui.form;
        selectRoleName();    // 调用查询方法
        function selectRoleName() {
            $.ajax({
                url: "/api/getCEquipmentListByCompanyId",
                type: "GET",
                dataType: "json",
                success: function (result) {
                    if(result.code == 0){
                        var list = result.data;    //返回的数据
                        var role = document.getElementById("machineModelId");        //add_role_name给select定义的id
                        for (var i = 0; i < list.length; i++) {
                            var option = document.createElement("option");    // 创建添加option属性
                            option.setAttribute("value", list[i].sbNo);                  // 给option的value添加值
                            option.innerText = list[i].sbNo;             // 打印option对应的纯文本 （超级管理员、管理员）
                            role.appendChild(option);                          // 给select 添加option子标签
                            form.render("select");                                // 刷性select，显示出数据
                        }
                    }else if(result.code == 1){
                        layui.use('layer', function(){
                            var layer = layui.layer;
                            layer.msg(data.msg);
                        });
                    } else if(result.code == 2){
                        location.href='/';
                    }
                }

            });
        }
    })
</script>


<script>
    //    var time = value;
    var dom = document.getElementById("main");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    app.title = '堆叠柱状图';
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['付款查看体检报告', '未付款']
        },
        grid: {
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '付款查看体检报告',
                type: 'bar',
                data: [],
                stack: '一致',
                barWidth: 30,
            },
            {
                name: '未付款',
                type: 'bar',
                barWidth: 30,
                stack: '一致',
                data: []
            },
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>


<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#test1', //指定元素
            type:'month',
            isInitValue: true,
        });
        $(document).ready(function () {
            $('#dj').click(function () {
                var flg = yanzheng();
                if(flg){
                    dianji();
                }
            })
        });

        function yanzheng() {
            if($("#test1").val() == null || $("#test1").val() == ""){
                layui.use('layer', function(){
                    var layer = layui.layer;
                    layer.msg("选择月份不能为空!");
                })
                return false;
            }else if($("#machineModelId").val() == null || $("#machineModelId").val() == ""){
                layui.use('layer', function(){
                    var layer = layui.layer;
                    layer.msg("设备编号不能为空!");
                })
                return false;
            }
            return true;
        }

        function dianji() {
            var today = $("#test1").val();
            var sbno = $("#machineModelId").val();
            $.ajax(
                {
                    url: '/api/getCompanyEcharts',
                    data: {mounthDate:today,sbno:sbno},
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        if(data.code === 0){
                            if(data.listPay.length>0){
                                myChart.setOption({
                                    xAxis: {data: data.date},
                                    series: [
                                        {name: '付款查看体检报告', data: data.listPay},
                                        {name: '未付款', data: data.listPaid}
                                    ]
                                });
                            }else {
                                layui.use('layer', function(){
                                    var layer = layui.layer;
                                    layer.msg("本月暂无数据!");
                                });
                            }

                        }
                    },
                    error: function (error) {
                        //请求失败  获取的报错信息
                        console.log(error);
                    }
                }
            );

            //选择机器情况
            $.ajax(
                {
                    url: '/api/getChioceEqInfor',
                    data: {sbno:sbno},
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        if(data.code === 0){
                            $("#ce1").html(data.sqNumber);
                            $("#ce2").html(data.sqPayNumber);
                            $("#ce3").html(data.sqDayNumber);
                            $("#ce4").html(data.sqTPayNumber);
                        }else if(data.code == 2) {
                            layui.use('layer', function(){
                                var layer = layui.layer;
                                layer.msg(data.msg);
                            });
                        }

                    }
                    ,error: function (error) {
                    //请求失败  获取的报错信息
                    console.log(error);
                }
                }
            );

        }
    });



</script>
</body>
</html>